<template>
  <BasicModal
    v-bind="$attrs"
    :title="t('routes.demo.documentManager.docDetail.documentDetail')"
    @register="registerDocDetailModal"
    @ok="handleSubmitDocDetail"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :minHeight="100"
    :width="1200"
  >
    <Tabs v-model:activeKey="detailActiveKey">
      <TabPane key="1" :tab="t('routes.demo.documentManager.docDetail.Property')">
        <BasicForm @register="registerForm" />
      </TabPane>
      <TabPane key="2" :tab="t('routes.demo.documentManager.docDetail.Attachment')">
        <BasicTable @register="registerAttachment" :dataSource="fileAttachments" />
      </TabPane>
      <TabPane key="3" :tab="t('routes.demo.documentManager.docDetail.Associated')">
        <BasicTable @register="registerAssociation" :dataSource="fileAssociationList" />
      </TabPane>
      <TabPane key="4" :tab="t('routes.demo.documentManager.docDetail.ReverseAssociated')">
        <BasicTable @register="registerBeAssociation" :dataSource="associationFileList" />
      </TabPane>
    </Tabs>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { getPrdFileDetail } from '/@/api/demo/document';

  import { getAttribute, getAttachment, getAssociation, getBeAssociation } from './tableData';

  const { t } = useI18n();
  const detailActiveKey = ref<string>('1');
  const fileQuality = ref<any>({});
  const fileAttachments = ref<any>([]);
  const fileAssociationList = ref<any>([]);
  const associationFileList = ref<any>([]);

  const handleSubmitDocDetail = () => {
    handleCancel();
  };

  const handleCancel = () => {
    detailActiveKey.value = '1';
    fileQuality.value = {};
    fileAttachments.value = [];
    fileAssociationList.value = [];
    associationFileList.value = [];
    closeModal();
  };

  // 属性详情
  const [registerForm, { setFieldsValue }] = useForm({
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
    schemas: getAttribute(),
    showResetButton: false,
    showSubmitButton: false,
  });
  // 附件详情
  const [registerAttachment] = useTable({
    columns: getAttachment(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    canResize: false,
  });
  // 关联详情
  const [registerAssociation] = useTable({
    columns: getAssociation(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    canResize: false,
  });
  // 被关联详情
  const [registerBeAssociation] = useTable({
    columns: getBeAssociation(),
    bordered: true,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    canResize: false,
  });
  // 图文档详情
  const [registerDocDetailModal, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    getPrdFileDetail(data.id).then((res) => {
      setFieldsValue(res.fileQuality);
      fileQuality.value = res.fileQuality;
      fileAttachments.value = res.fileAttachments;
      fileAssociationList.value = res.fileAssociationList;
      associationFileList.value = res.associationFileList;
    });
  });
</script>
